<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title> - </title>
		<link rel="stylesheet" href="../css/style.default.css" type="text/css" />
		<script type="text/javascript" src="../js/plugins/jquery-1.7.min.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery.cookie.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery.uniform.min.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery.validate.min.js"></script>
		<script type="text/javascript" src="../js/plugins/jquery.tagsinput.min.js"></script>
		<script type="text/javascript" src="../js/plugins/charCount.js"></script>
		<script type="text/javascript" src="../js/plugins/ui.spinner.min.js"></script>
		<script type="text/javascript" src="../js/plugins/chosen.jquery.min.js"></script>
		<script type="text/javascript" src="../js/custom/general.js"></script>
		<script type="text/javascript" src="../js/custom/forms.js"></script>

		<!--[if IE 9]>
    <link rel="stylesheet" media="screen" href="css/style.ie9.css"/>
<![endif]-->
		<!--[if IE 8]>
    <link rel="stylesheet" media="screen" href="css/style.ie8.css"/>
<![endif]-->
		<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	</head>

	<body class="withvernav">

		<div class="bodywrapper">
			<iframe style="background-color: #485b79;" src="top.html" width="100%" height="160px"></iframe>
			<!--header-->
				
			<!--header-->

			<div class="vernav2 iconmenu">
				<ul>
					<li class="current"><a href="#formsub" class="editor">系统概览</a>
						<!-- <span class="arrow"></span>
						<ul id="formsub">
							<li class="current"><a href="forms.html">系统概览</a></li>
						</ul> -->
					</li>
					
				</ul>
				<a class="togglemenu"></a>
				<br /><br />
			</div>
			<!--leftmenu-->

			<div class="centercontent">
				<div class="pageheader">
				    <h1 class="pagetitle">统计信息</h1>
				    <span class="pagedesc">Statistical Information</span>
				    
				    <ul class="hornav">
				        <li class="current"><a href="#preview_system">运行统计</a></li>
						 <li ><a href="#preview_dev">关于</a></li>
				       
				    </ul>
					
				</div><!--pageheader-->
				<div id="contentwrapper" class="contentwrapper">
					
					<div id="preview_system" class="subcontent">
						 <div id="main" style="width: 100%;height: 1000px; border: 1px solid red ;">666</div>
					</div>
					<script>
						jQuery(function(){
							
							var chartDom = document.getElementById('main');
							var myChart = echarts.init(chartDom);
							var option;
							
							function getVirtulData(year) {
							    year = year || '2017';
							    var date = +echarts.number.parseDate(year + '-01-01');
							    var end = +echarts.number.parseDate((+year + 1) + '-01-01');
							    var dayTime = 3600 * 24 * 1000;
							    var data = [];
							    for (var time = date; time < end; time += dayTime) {
							        data.push([
							            echarts.format.formatTime('yyyy-MM-dd', time),
							            Math.floor(Math.random() * 60)
							        ]);
							    }
								console.log(data)
							    return data;
							}
							
							option = {
							    title: {
							        top: 30,
							        left: 'center',
							        text: '服务器负载日历图（单位：请求次数）'
							    },
							    tooltip: {},
							    visualMap: {
							        min: 0,
							        max: 100,
							        type: 'piecewise',
							        orient: 'horizontal',
							        left: 'center',
							        top: 65
							    },
							    calendar: {
							        top: 120,
							        left: 30,
							        right: 30,
							        cellSize: ['auto', 13],
							        range: '2020',
							        itemStyle: {
							            borderWidth: 0.5
							        },
							        yearLabel: {show: false}
							    },
							    series: {
							        type: 'heatmap',
							        coordinateSystem: 'calendar',
							        data: getVirtulData(2020)
							    }
							};
							
							option && myChart.setOption(option);
						})
						

					</script>
					<div id="preview_dev" class="subcontent" style="display: none">
						我是开发团队
					</div>
				</div>
			</div>
			<!---->
		</div>
		<!--bodywrapper-->

	</body>
</html>
